<template>
    <div class="login-wrapper">
        <div class="login-form">
            <div class="login-title">企业微信托管系统</div>
            <Form :form="form">
                <SchemaField :schema="schema" />
                <Submit @submit="handleSubmit" class="login-submit">提交</Submit>
            </Form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {useRoute, useRouter} from "vue-router";
import {message} from "ant-design-vue";
import {createForm} from "@formily/core";
import {createSchemaField} from "@formily/vue";
import {Submit, FormItem, Form, Input} from "@formily/antdv";
import {STORAGE} from "@/utils/config";
import {login} from "@/api";
import {navPath} from "@/router/config.ts";

const nav = useRouter();
const query: {redirect?: string} = useRoute().query;

// 默认帐号密码
// "username": "test",
// "pwd": "12345"

const schema = {
    type: "object",
    properties: {
        username: {
            type: "string",
            title: "账号",
            "x-decorator": "FormItem",
            "x-component": "Input", // createSchemaField 对应components里面的组件
            required: true,
            "x-component-props": {
                placeholder: "请输入账号",
            },
            //默认值
            default: "test",
        },
        pwd: {
            type: "string",
            title: "密码",
            "x-decorator": "FormItem",
            "x-component": "Input",
            required: true,
            "x-component-props": {
                type: "password",
                placeholder: "请输入密码",
            },
            default: "12345",
        },
    },
};

const {SchemaField} = createSchemaField({
    components: {FormItem, Input},
});

const form = createForm();

const handleSubmit = values => {
    console.log("values", values);
    login(values)
        .then((res: string) => {
            const url: string = query?.redirect || navPath.homeRouter;
            sessionStorage.setItem(STORAGE.AUTHORIZATION, res);
            nav.replace(url);
        })
        .catch(() => {
            message.error("登录失败, 请检查用户名或密码是否正确！");
        });
};
</script>

<style lang="scss" scoped>
.login-wrapper {
    width: 100%;
    height: 100%;
    background-color: #ccc;

    .login-form {
        width: 600px;
        height: 300px;
        border-radius: 8px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -70%);

        box-sizing: border-box;
        padding: 40px;
    }
    .login-title {
        text-align: center;
        font-size: 28px;
        padding-bottom: 40px;
    }
    .login-submit {
        width: 100%;
    }
}
</style>
